<template>
	<view class="setting">
		
		<view class="navi">
			<button type="warn" size="mini" style="margin-right: 20px;" @click="addUser">添加主播</button>
		</view>
		
		<!-- <scroll-view scroll-y="true" class="scrool"> -->
			<uni-table ref="userTable" class="user-table" border stripe emptyText="暂无更多数据">
				<uni-tr class="table-tr">
					<uni-th width="50" align="center">显示</uni-th>
					<uni-th width="150" align="center">主播</uni-th>
					<uni-th width="150" align="center">艺名</uni-th>
					<uni-th width="150" align="center">礼物</uni-th>
					<uni-th width="104" align="center">本场票数</uni-th>
					<uni-th width="104" align="center">历史总票数</uni-th>
					<uni-th width="140" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in users" :key="index">
					<uni-td align="center">
						<view class="bb" @click="showClick(item, index)">
							<view class="check-b" v-if="!item.show">
							</view>
							<view class="check-selected" v-else>
								<uni-icons type="eye" color="#fff" size="15"></uni-icons>
							</view>
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="gift-info">
							<image class="header" :src="item.header" mode=""></image>
							<view class="gift-name">
								{{item.name}}
							</view>
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.nick_name }}</view>
					</uni-td>
					<uni-td align="center">
						<view class="gift-info">
							<image class="gift-icon" :src="item.gift_icon" mode=""></image>
							<view class="gift-name">
								{{item.gift_name}}
							</view>
						</view>
					</uni-td>
					<uni-td align="center">{{item.now_gift_coins}}</uni-td>
					<uni-td align="center">{{item.total_gift_coins}}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button style="margin-right: 10px;" size="mini" type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(item)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		<!-- </scroll-view> -->
		
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog 
			:type="alertDialogInfo.msgType" 
			:confirmText="alertDialogInfo.confirmText" 
			:title="alertDialogInfo.title" 
			:content="alertDialogInfo.content" 
			:showClose="alertDialogInfo.showClose"
			:cancelText="alertDialogInfo.cancelText"
			@confirm="dialogConfirm">
			</uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>

	export default {
		name:"setting",
		data() {
			return {
				users: [],
				alertDialogInfo: {
					type: '',
					msgType: 'warn', // success error warn info
					showClose: true,
					cancelText: '关闭',
					confirmText: '确定',
					title: '',
					content: '',
					
				},
			};
		},
		
		created() {
			window.electronAPI.userList().then((list) => {
				this.users = list
			})
			window.electronAPI.noticeUserListChanged((userList, from) => {
				if (from != 'setting') {
					this.users = userList
				}
			})
		},
		
		beforeDestroy() {
			window.electronAPI.removeNoticeUserListChanged()
		},
		
		methods: {

			addUser() {
				window.electronAPI.addUserAlert()
			},
			
			edit(index) {
				window.electronAPI.editUserAlert(index)
			},
			
			showClick(item, index) {
				if (item.show == 0) {
					item.show = 1
				} else {
					item.show = 0
				}
				window.electronAPI.changeUserInfo(item, index, true, 'setting')
			},
			
			del(item) {
				this.alertDialogInfo = {
					type: 'del',
					msgType: 'warn', // success error warn info
					showClose: true,
					confirmText: '删除',
					title: '警告',
					content: '删除该主播，将永久失去他的个人数据，确定要删除吗？',
					ext: item
				}
				this.$refs.alertDialog.open()
			},
			
			dialogConfirm() {
				if (this.alertDialogInfo.type == 'del') {
					const index = this.users.indexOf(this.alertDialogInfo.ext);
					if (index > -1) {
						this.users.splice(index, 1)
						window.electronAPI.delUser(this.alertDialogInfo.ext)
					}
				}
			}
		}
	}
</script>

<style scoped>

	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 2px;                /* 滚动条的宽度 */
	  height: 2px;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}
	
	.setting {
		width: 100%;
		height: 100%;
		background-color: #272730;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		display: flex;
		border: #73738f 1px solid;
		flex-direction: column;
		box-sizing: border-box;
	}
	
	.scrool {
		margin: 10px;
		width: calc(100% - 20px);
		border-radius: 5px;
		overflow: hidden;
	}
	
	.user-table {
		margin: 5px 10px 10px 10px;
		width: calc(100% - 20px);
		border-radius: 3px;
	}
	
	.navi {
		margin: 10px 10px 0 10px;
	}
	
	.gift-info {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.gift-icon {
		width: 30px;
		height: 30px;
	}
	
	.header {
		width: 25px;
		height: 25px;
		margin-right: 5px;
		border-radius: 100%;
	}
	
	.table-tr {
		position: sticky;
		top: 0;          /* 固定在顶部 */
		background: #414f68; /* 避免透明遮挡 */
		z-index: 10;     /* 确保表头在最上层 */
		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* 可选：滚动时增加阴影 */
	}
	
	.uni-group {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bb {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.check-b {
		width: 20px;
		height: 20px;
		border-radius: 3px;
		border: #73738f 1px solid;
	}
	
	.check-b:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	
	.check-selected {
		width: 20px;
		height: 20px;
		border-radius: 3px;
		border: #fc2a75 1px solid;
		background-color: #fc2a75;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.check-selected:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	
</style>